<template>
	<view class="tab">
		<view :class="['title',item.status === true?'active': '']" v-for="(item,index) in tabTitle" :key="item.id" @click="handleClick(index)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"tabs",
		props:{
			tabTitle:{
				type:Array,
				required:true
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			handleClick(index){
				this.tabTitle.map(v => v.status = false)
				this.tabTitle[index].status = true
				this.$emit('tabStatus',this.tabTitle)
			}
		}
	}
</script>

<style lang="less" scoped>
.tab{
	padding: 20rpx 40rpx;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	.active{
		color: #5d8ced;
		font-weight: 700;
	}
}
</style>
